<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Ahorro</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.21.custom.css"
	rel="stylesheet" />

<!-- end -->

<style type="text/css">
.tip {
	background-color: #ffcc99;
	padding: 10px;
	display: none;
	position: absolute;
	border: 1px solid black;
}
</style>
<!--  Core jQuery  -->

<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<!--  Donut -->

<script type="text/javascript" src="scripts/jquery.donutchart.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<![endif]-->
<!--  jQuery UI-->
<script type="text/javascript" src="scripts/ui/jquery-ui-1.8.21.custom.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.core.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.widget.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.button.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.sortable.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.progressbar.js"></script>


</head>

<body>
	<h1>xxxxxxxxxxxx</h1>
	<div class="header">
	
	
	<div class="title">	
		<ul>
		<li style="width:20em">Mis Metas</li>
		<li>Ahorrado <br/>99.999 ?</li>
		<li>Intereses <br/>99.999 ?</li>
		</ul>
		
	</div>
	<div class="button-icono-gris button-editar-modificar">
		
	</div>
	<div class="button-icono tipo-editar-modificar">
		
	</div>	
	<div class="button-icono tipo-cerrar">

	</div>
	<div class="button-icono tipo-condiciones">

	</div>

	<div class="button-meta flecha-abajo">

	</div>
	<div class="button-meta flecha-arriba">

	</div>

	<div class="button-signo signo-mas">

	</div>
	<div class="button-idea idea-bombilla">

	</div>
	<div class="button-alerta alerta-excl-roja">

	</div>
	<div class="button-alerta alerta-excl-azul">

	</div>
	<div class="button-alerta alerta-check-verde">

	</div>

	<div class="navegation">
		<div class="buttonSmall buttonStd">	
			Hitos
		</div>

		<div class="buttonSmall buttonStd">	
			Metas
		</div>
		
		<div class="buttonLarge buttonStdLarge">
			Hitos
		</div>

		<div class="buttonLarge buttonStdLarge">	
			Metas	
		</div>
		
	</div>
	<div class="navegation">
		<div class="buttonSmall buttonProcs">	
			Hitos
		</div>

		<div class="buttonSmall buttonProcs">	
			Metas
		</div>
		
		<div class="buttonLarge buttonProcsLarge">
			Hitos
		</div>

		<div class="buttonLarge buttonProcsLarge">	
			Metas	
		</div>
		
	</div>
	<div class="navegacion">
		<div class="button-recomendacion recomendacion-mas"></div>
	</div>
	</div>
	<div style="clear:both"></div>
	<div id="meta_content">
	
	
		<form action="bk+metas+home.html">
		<button>Metas</button>
		</form>

		<form action="bk+metas+hitos.html">
		<button>Hitos</button>
		</form>
		<form id="formNueva" action="bk+metas+hitos.html">
		<button>Nueva</button>
		</form>
	
	</div>
	<div id="meta_content">
		<div id="meta_grid">
			<ul>
				<li><p>999.999 EUR</p></li>
				<li><p>999.999 EUR</p></li>
				<li><p>999.999 EUR</p></li>
				<li><p>999.999 EUR</p></li>
				<li><p>999.999 EUR</p></li>
				<li><p>999.999 EUR</p></li>
			</ul>
		</div>
		<div id="meta_group">
			<ul class="meta_list">
			<li id="meta_1" >
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>75 meses</strong> | faltan 25 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>
			<li id="meta_2">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>50 meses</strong> | faltan 12,5 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			<li id="meta_3">
			<div class="meta_single ui-corner-all" >
				<div class="meta_picture">
					<img src="./images/nophoto.png" alt="Sin Imagen" />
				</div>
					
				<div class="meta_rest_money">
					<strong>titulo meta</strong><br />99,999.99 EUR | tienes 99,999.99 EUR
				</div>
				<div class="meta_donut" data-percent="75" style="width:200px">75</div>
				<div class="meta_rest_money">
					<br/>
					<strong>10 meses</strong> | faltan 3 meses
				</div>
				<div style="clear:both">	
					<div class="meta_progress">xxx</div>					
				</div>										
				
			</div>
			</li>				
			
						
			</ul>
		</div>
	</div>



<script type="text/javascript">

$(document).ready(
	function(){
	

    /*$(".meta_draggable").draggable({axis:"x",
									cursor: "pointer", 
    								snapMode: "outer",
    								opacity:0.60,												
    								containment: 'parent'});*/ 
							
	$(".meta_list").sortable( {	placeholder: 'placeholder',
								cursor: 'hand',
								axis: 'y',
								cursor: 'hand', 
								containment: 'parent',
								cursorAt: { top: 5 },
								opacity: 0.75} );
	
									    									
    //$(".meta_progress_slider").slider({ disabled:true, range: 'min' , value: 25, values: [10,33,43] });
    
	$(".meta_donut").html("");    
    $(".meta_donut").donutchart({
    'bgColor' : '#ddd',
    'fgColor' : '#ccc',
    'size' : 50,
    'donutwidth': 15,
    'textsize': 16,
  	});    
	$(".meta_donut").donutchart("animate");
    
    $(".meta_progress").html("");
    $(".meta_progress").progressbar({ value: 37, disabled: true});
//  	alert ($("#meta_progress").progressbar( "option", "value" ));
	
		$( "button" ).button({
	            icons: {
	                primary: "ui-icon-locked"
	            }
            });
	$("#formNueva").submit(function (){
							alert ("x crear");
							return false;
						});
})

</script>
</body>
</html>